/*
 * © 2010 Autodata Solutions Company. All Rights Reserved
 * This source code is the confidential and proprietary information of Autodata Solutions Company.
 * The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
 * without the prior written consent of Autodata Solutions Company.
 */
Ext.ns('net.autodata.compare');
(function () {
	
	var DQ = Ext.DomQuery;
	
	/**
	 * This view class is used to control how the CompareVehiclesPanel is rendered
	 * @class CompareVehiclesView
	 * @extends net.autodata.AbstractView
	 * @namespace net.autodata.compare
	 */
	var View = Ext.extend(net.autodata.AbstractView, {
		
		/**
		 * An optional extra CSS class that will be added to this component's Element (defaults to ''). 
		 * This can be useful for adding customized styles to the component 
		 * or any of its children using standard CSS rules.
		 * @property cls
		 * @type String
		 */
		cls: '',
		
		/**
		 * @property templates
		 * @type Object
		 */
		templates: undefined,
		
		/**
		 * @property baseVehiclePanel
		 * @type net.autodata.compare.VehiclePanel
		 */
		baseVehiclePanel: undefined,
		
		/**
		 * @property competitorPanels
		 * @type Array<net.autodata.compare.VehiclePanel>
		 */
		competitorPanels: undefined,
		
		/**
		 * @property baseVehicleWidth
		 * @type int
		 */
		baseVehicleWidth: 334,
		
		/**
		 * @property competitorWidth
		 * @type init
		 */
		competitorWidth: 147,
		
		/**
		 * @property lastCompetitorWidth
		 * @type int
		 */
		lastCompetitorWidth: 148,
		
		//override the abstract constructor to allow this view to be created
		constructor: function ()
		{
			this.competitorPanels = [];
			this.addEvents({
				
				'refresh': true,
				
				/**
				 * @event compareanother
				 * Fires when the compare another vehicle button clicked
				 */
				'compareanother': true,
				
				/**
				 * @event change
				 * Fires when a new competitor is selected
				 * @param {int} index
				 * @param {String} acode
				 */
				'change': true,
				
				/**
				 * @event remove
				 * Fires when a competitor is selected for removal
				 * @param {int}
				 */
				'remove': true
			});
		},
		
		init: function ()
		{
			View.superclass.init.apply(this, arguments);
			
			var store = this.component.getStore();
			
			store.on({
				'load': this.refresh,
				'updatecompetitor': this.refreshCompetitor,
				'imageupdated': this._imageUpdated,
				scope: this
			});
		},
		
		/**
		 * @method initTemplates
		 */
		initTemplates: function ()
		{
			var ts = this.templates || {};
			
			if (!ts.mainTpl) {
				
				ts.mainTpl = new Ext.XTemplate(
					'<div class="view {viewCls}" style="{[this.viewWidth(values.viewWidth)]}{[this.viewHeight(values.viewHeight)]}">',
						'<table class="tbl-body" border="0" cellpadding="0" cellspacing="0">',
							'<tr>',
								'<td class="basevehicle" style="width:{baseWidth}px;"><div class="basevehicle-wrap"></div></td>',
								'<td class="competitor" style="width:{competitorWidth}px;"><div class="competitor1-wrap"></div></td>',
								'<td class="competitor" style="width:{competitorWidth}px;"><div class="competitor2-wrap"></div></td>',
								'<td class="competitor" style="width:{lastCompetitorWidth}px;"><div class="competitor3-wrap"></div></td>',
							'</tr>',
						'</table>',
					'</div>',
					{
						viewWidth: function (v)
						{
							return Ext.isEmpty(v) ? '' : String.format('width:{0}px;', v);
						},
						
						viewHeight: function (v)
						{
							return Ext.isEmpty(v) ? '' : String.format('height:{0}px;', v);
						},
						
						compile: true,
						disableFormats: true
					}
				);				
			}
			
			this.templates = ts;			
		},
		
		/**
		 * @method render
		 */
		render: function ()
		{
			if (!this.component) {
				return;
			}
			var panel = this.component;
			
			this.templates.mainTpl.overwrite(panel.el.dom, {
				viewCls: this.cls || '',
				viewWidth: panel.width,
				viewHeight: panel.height,
				baseWidth: this.baseVehicleWidth, 
				competitorWidth: this.competitorWidth,
				lastCompetitorWidth: this.lastCompetitorWidth || this.competitorWidth
			});
		},
		
		/**
		 * @method refresh
		 */
		refresh: function ()
		{
			var panel = this.component;
			var store = panel.getStore();
			
			//create the base vehicle panel
			var baseVehicle = store.getBaseVehicle();
			
			if (this.baseVehiclePanel) {
				this.baseVehiclePanel.destroy();
				this.baseVehiclePanel = undefined;
			}
			
			this.baseVehiclePanel = this.createBaseVehiclePanel(
				DQ.selectNode('.basevehicle-wrap', panel.el.dom), 
				baseVehicle,
				this.baseVehicleViewCfg
			);
						
			//Iterate over the competitors
			store.each(function (record, index) {
				this.refreshCompetitor(index, record);
			}, this, false);
			
			this.fireEvent('refresh', this);
		},
		
		/**
		 * @method refreshCompetitor
		 * @param {int} index
		 * @param {Ext.data.Record} record
		 */
		refreshCompetitor: function (index, record)
		{
			
			var body = this.component.el.dom;
			
			var existingPanel = this.competitorPanels[index];
			if (existingPanel) {
				existingPanel.destroy();
				this.competitorPanels[index] = undefined;
			}
			
			var renderTo = String.format('.competitor{0}-wrap', index + 1);
			
			var cpanel = this.createCompetitorVehiclePanel(
				DQ.selectNode(String.format('.competitor{0}-wrap', index + 1), body),
				record,
				index
			);
			
			this.competitorPanels[index] = cpanel;
		},
		
		/**
		 * @method createBaseVehiclePanel
		 * @param {String} renderTo
		 * @param {Ext.data.Record} vehicle
		 * @param {Object} [viewCfg]
		 */
		createBaseVehiclePanel: function (renderTo, vehicle, viewCfg)
		{
			return new net.autodata.compare.VehiclePanel({
				view: new net.autodata.compare.BaseVehicleView(viewCfg),
				renderTo: renderTo,
				vehicle: vehicle.data,
				listeners: {
					'change': this._compareAnother,
					scope: this
				}
			});
		},
		
		/**
		 * @method createCompetitorVehiclePanel
		 * @param {String} renderTo
		 * @param {Ext.data.Record} vehicle
		 * @param {int} index
		 */
		createCompetitorVehiclePanel: function (renderTo, vehicle, index)
		{
			var hasAcode = !Ext.isEmpty(vehicle.get('acode'));
			if (hasAcode) {
				if (vehicle.get('sponsored') !== true) {
					view = this.createCompetitorView(this.competitorVehicleViewCfg);
				} else {
					view = this.createSponsoredCompetitorView(this.competitorVehicleViewCfg);
				}				
			} else {
				view = this.createEmptyCompetitorView(this.emptyCompetitorViewCfg);
			}
			
			return new net.autodata.compare.VehiclePanel({
				renderTo: renderTo,
				vehicle: hasAcode ? vehicle.data : undefined,
				view: view,
				listeners: {
					'change': this._changeCompetitor.createDelegate(this, [index], 0),
					'remove': this._removeCompetitor.createDelegate(this, [index], 0),
					scope: this
				}
			});
		},
		
		/**
		 * @method createCompetitorView
		 * @param {Object} viewCfg
		 * @return {net.autodata.compare.CompetitorVehicleView}
		 */
		createCompetitorView: function (viewCfg)
		{
			return new net.autodata.compare.CompetitorVehicleView(viewCfg);
		},
		
		/**
		 * @method createSponsoredCompetitorView
		 * @param {Object} viewCfg
		 * @return {net.autodata.compare.SponsoredCompetitorView}
		 */
		createSponsoredCompetitorView: function (viewCfg)
		{
			return new net.autodata.compare.SponsoredCompetitorView(viewCfg);
		},
		
		/**
		 * @method createEmptyCompetitorView
		 * @param {Object} viewCfg
		 * @return {net.autodata.compare.EmptyCompetitorView}
		 */
		createEmptyCompetitorView: function (viewCfg)
		{
			return new net.autodata.compare.EmptyCompetitorView(viewCfg);
		},
		
		
		getPanelByAcode: function (acode)
		{
			var panels = [this.baseVehiclePanel].concat(this.competitorPanels);
			
			for (var i=0; i<panels.length; i++) {
				var p = panels[i];
				var v = p.getVehicle();
				if (!v) {
					continue;
				}
				
				if (v.acode === acode) {
					return p;
				}
			}
			
			return undefined;
		},
		
		/**
		 * @private
		 */
		_imageUpdated: function(record)
		{
			//find the panel with the matching acode
			var p = this.getPanelByAcode(record.get('acode'));
			if (p) {
				p.setVehicle(record.data);
			}
		},
		
		/**
		 * @method _compareAnother
		 * @private
		 */
		_compareAnother: function ()
		{
			this.fireEvent('compareanother');
		},
		
		/**
		 * @method _changeCompetitor
		 * @private
		 */
		_changeCompetitor: function (index, acode)
		{
			this.fireEvent('change', index, acode);
		},
		
		/**
		 * @method _removeCompetitor
		 * @private
		 */
		_removeCompetitor: function (index)
		{
			this.fireEvent('remove', index);
		},
		
		onDestroy: function ()
		{
			var store = this.panel.getStore();
			store.un('load', this.refresh, this);
			store.un('updatecompetitor', this.refreshCompetitor, this);
			store.un('imageupdate', this._imageUpdated, this);
			
			View.superclass.onDestroy.apply(this, arguments);
		}
		
	});
	
	net.autodata.compare.CompareVehiclesView = View;
})();